<html>
<head>
<script>
function loadXMLDoc(fname) {
	var xmlDoc;
	if (window.ActiveXObject) {
		xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
	} else if (document.implementation && document.implementation.createDocument) {
		xmlDoc = document.implementation.createDocument("","",null);
	} else {
		alert('Your browser cannot handle this script');
	}
	xmlDoc.async = false;
	xmlDoc.load(fname);
	return(xmlDoc);
}

function transform() {
	var xml=loadXMLDoc(document.getElementById("xml").value);
	var xslt=loadXMLDoc(document.getElementById("xslt").value);
	
	if (window.ActiveXObject) {
		var result = xml.transformNode(xslt);
		document.getElementById("content").innerHTML=result;
		document.getElementById("result").value = result;
	} else if (document.implementation && document.implementation.createDocument) {
		var xsltProcessor = new XSLTProcessor();
		xsltProcessor.importStylesheet(xslt);
		var resultDocument = xsltProcessor.transformToFragment(xml, document);
		document.getElementById("content").appendChild(resultDocument);
		document.getElementById("result").value = document.getElementById("content").innerHTML;
	}
}
</script>
</head>

<body>
<form enctype="multipart/form-data" method="post">
<!--
<div>xml : <input id="xml" value="test.xml"/></div>
<div>xslt: <input id="xslt" value="test.xslt"/></div>
-->
<div>xml : <input id="xml" type="file" size="50"/></div>
<div>xslt: <input id="xslt" type="file" size="50"/></div>
<div><input type="button" value="Transform" onclick="transform()"/></div>
<div><textarea id="result" cols="100" rows="20"></textarea></div>
</form>
<div id="content"></div>
</body>
</html>